<template>
  <view
    class="mxp-calendar-day"
    :style="[
      calendarItemStyle,
      {
        borderTopLeftRadius: dayData.beforeRange ? '6px' : '',
        borderBottomLeftRadius: dayData.beforeRange ? '6px' : '',
        borderTopRightRadius: dayData.afterRange ? '6px' : '',
        borderBottomRightRadius: dayData.afterRange ? '6px' : '',
      },
    ]"
    @click="choiceDate(dayData)"
  >
    <view class="day-view" :style="[actMultipleStyle, { height: dayHeight }]">
      <!-- 自定义打点上方信息 -->
      <text
        class="text"
        :style="[
          dayData.extraInfo?.topInfoColor ? { color: dayData.extraInfo.topInfoColor } : {},
          dayData.extraInfo?.topInfoSize ? { fontSize: dayData.extraInfo.topInfoSize } : {},
          calendarItemStyle,
          actMultipleStyle,
        ]"
      >
        {{ dayData.extraInfo?.topInfo || '' }}
      </text>
      <!-- 日期文字 -->
      <text class="date-text" :style="[{ color: dayColor, fontSize: daySize, fontWeight: dayBold ? 'bold' : 'normal' }, calendarItemStyle, actMultipleStyle]">
        {{ dayData.date }}
      </text>
      <!-- 徽标 -->
      <mxp-badge v-if="selected && dayData.extraInfo && dayData.extraInfo.badge" :badge="dayData.extraInfo.badge" v-bind="newBadgeOptions"></mxp-badge>
      <!-- 今日的文字 -->
      <text
        v-if="!lunar && !dayData.extraInfo?.bottomInfo && dayData.isDay && !dayData.beforeRange && !dayData.afterRange"
        class="text"
        :style="[calendarItemStyle, actMultipleStyle]"
      >
        今天
      </text>
      <!-- 农历文字 -->
      <text
        v-if="lunar && !dayData.extraInfo?.bottomInfo && !dayData.beforeRange && !dayData.afterRange"
        key="text-2"
        class="text"
        :style="[{ color: lunarColor, fontSize: lunarSize }, calendarItemStyle, actMultipleStyle]"
      >
        {{ dayText }}
      </text>
      <!-- 选中的文字展示 -->
      <text
        v-if="!dayData.extraInfo?.bottomInfo && (dayData.beforeRange || dayData.afterRange)"
        key="text-3"
        class="text"
        :style="[calendarItemStyle, actMultipleStyle]"
      >
        {{ multipleText }}
      </text>
      <!-- 自定义打点下方信息 -->
      <text
        class="text"
        :style="[
          dayData.extraInfo?.bottomInfoColor ? { color: dayData.extraInfo.bottomInfoColor } : {},
          dayData.extraInfo?.bottomInfoSize ? { fontSize: dayData.extraInfo.bottomInfoSize } : {},
          calendarItemStyle,
          actMultipleStyle,
        ]"
      >
        {{ dayData.extraInfo?.bottomInfo || '' }}
      </text>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { type CSSProperties, type PropType, computed } from 'vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import MxpBadge, { type $BadgeProps } from '@/mxp-ui/mxp-badge/mxp-badge.vue';
  import type { $NewDate } from '../../util';
  import type { $CalendarViewSelected } from '../../mxp-calendar-view.vue';
  import { isDarkColorStorage, lightenDarkenColorStorage } from '@/mxp-ui/mxp-tool/utils/color';
  defineOptions({
    name: 'mxp-calendar-day',
  });

  const props = defineProps({
    /** 每一天高度 */
    dayHeight: { type: String as PropType<$SizeUnitStr>, default: '60px' },
    /** 徽标的配置  */
    badgeOptions: { type: Object as PropType<$BadgeProps>, default: () => ({}) },
    /** 主题色 */
    themeColor: { type: String as PropType<$AllColorStr>, default: '#3c9cff' },
    /** 日期字体颜色 */
    dayColor: { type: String as PropType<$AllColorStr>, default: '#313131' },
    /** 日期字体大小 */
    daySize: { type: String as PropType<$SizeUnitStr>, default: '18px' },
    /** 日期字体加粗 */
    dayBold: { type: Boolean, default: false },
    /** 农历字体颜色 */
    lunarColor: { type: String as PropType<$AllColorStr>, default: '#313131' },
    /** 农历字体大小 */
    lunarSize: { type: String as PropType<$SizeUnitStr>, default: '12px' },
    /** mode=range时，第一个日期底部的提示文字 */
    startText: { type: String, default: '开始' },
    /** mode=range时，最后一个日期底部的提示文字 */
    endText: { type: String, default: '结束' },
    /** 每一天的数据 */
    dayData: { type: Object as PropType<$NewDate>, default: {} as $NewDate },
    /** 选中的日期数据 */
    selectedDayData: { type: Object as PropType<$NewDate>, default: undefined },
    /** 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] */
    selected: { type: Array as PropType<$CalendarViewSelected[]>, default: () => [] },
    /** 是否显示农历 */
    lunar: { type: Boolean, default: false },
  });

  const emits = defineEmits<{
    (e: 'change', str: $NewDate): void;
  }>();

  const newBadgeOptions = computed<$BadgeProps>(() => {
    const op = JSON.parse(JSON.stringify(props.dayData?.extraInfo?.badgeOptions || props.badgeOptions));
    const cusStyle: CSSProperties = { position: 'absolute', right: '0px', top: '8px' };
    op.cusStyle = op.cusStyle ? { ...cusStyle, ...op.cusStyle } : cusStyle;
    return op;
  });
  const calendarItemStyle = computed<CSSProperties>(() => {
    let style: CSSProperties = {};
    // 选中的日期范围内的样式
    if (props.dayData?.rangeMultiple) {
      style = { backgroundColor: lightenDarkenColorStorage(props.themeColor, 0.1), color: isDarkColorStorage(props.themeColor) ? '#ffffff' : '#333333' };
    }
    // 今天的日期样式
    if (props.dayData?.isDay) {
      style.color = props.themeColor;
    }
    // 禁用的日期样式
    if (props.dayData?.disable) {
      style = { backgroundColor: 'rgba(249, 249, 249, 0.4)', color: '#c0c0c0' };
    }
    return style;
  });

  // 选中的日期样式
  const actMultipleStyle = computed<CSSProperties>(() => {
    const { dayData } = props;
    if (
      (dayData?.beforeRange ||
        dayData?.afterRange ||
        dayData?.multiples ||
        (props.selectedDayData?.fullDate === dayData?.fullDate && dayData?.mode === 'single')) &&
      !dayData.disable
    ) {
      return { backgroundColor: props.themeColor, color: '#fff', borderRadius: '6px' };
    } else {
      return {};
    }
  });

  // 日期文字
  const dayText = computed(() => {
    let text = '';
    const { dayData } = props;
    if (dayData?.isDay) {
      text = '今天';
    } else if (dayData?.lunar.dayCn === '初一') {
      text = dayData?.lunar.monthCn;
    } else {
      text = dayData?.lunar.dayCn;
    }
    return text;
  });
  // 选中的文字
  const multipleText = computed(() => {
    let text = '';
    const { dayData } = props;
    if (dayData?.afterRange) {
      text = props.endText;
    } else if (dayData?.beforeRange) {
      text = props.startText;
    }
    return text;
  });

  /** 日期选择 */
  function choiceDate(dayData: $NewDate) {
    emits('change', dayData);
  }
</script>

<style lang="scss" scoped>
  .mxp-calendar-day {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;

    .day-view {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .date-text {
        font-size: 18px;
        color: #333333;
      }

      .text {
        font-size: 12px;
        color: #666666;
      }
    }
  }
</style>
